<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		* {
			padding: 0; margin: 0;
		}
		.main {
			border: solid 1px black;
			width: 600px; height: 512px;
			background: url(img/bg_day.png) 0px 0;
			margin: 20px auto;
			position: relative;
			
			overflow: hidden;
		}
		.bird {
			width: 37px; height: 27px;
			background: url(img/bird0_0.png) no-repeat center;
			position: absolute;
			left: 50px; top: 200px;
		}
		.gameover {
			width: 204px; height: 54px;
			background: url(img/text_game_over.png);
			margin: auto;
			left: 0; top: 0; right: 0; bottom: 0;
			position: absolute;
			display: none;
		}
		.title {
			width: 178px; height: 48px;
			background: url(img/title.png);
			margin: auto;
			left: 0; top: 0; right: 0; bottom: 0;
			position: absolute;
		}
		.bluebird {
			display: block;
			margin: 70px auto;
		}
		.start {
			display: block;
			position: absolute;
			left: 240px; top:300px;
			cursor: pointer;
		}
		.pipe {
			position: absolute;
			right : -52px;
			width: 52px; height: 320px;
		}
		.up {
			background: url(img/pipe_up.png);
		}
		.down {
			background: url(img/pipe_down.png);
		}
	</style>
	<body>
		<div class="main">
			<div class="bird" style="display: none;"></div>
			
			<div class="gameover">
				
			</div>
			
			<div class="title">
				
			</div>
			<img class="bluebird" src="img/bird1_0.png"/>
			
			<img class="start" src="img/button_play.png"/>
		</div>
		
	</body>
	<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function Controller(type){
			//考虑可扩展性
			switch(type) {
				case "key" : return {
					run : function(){
						document.addEventListener("keydown", function(e){
							if(e.keyCode == 32) bird.jump();
						})
					}
				};
// 				case "mouse" :
// 				case "sound" :
// 				case "key&mouse" : 
// 				case "soul"
			}
		}
		
		//管道
		function Pipe(type) {
			this.init = function(_height){
				this.el = document.createElement("div");
				switch(type) {
					//上管道
					case Pipe.PIPE_TYPE_UP : {
						this.el.className = "pipe up"; 
						this.el.style.top = randomInt(-220, 0) + "px"; 
						this._height = 320 + this.el.offsetTop;
						break;
					}
					case Pipe.PIPE_TYPE_DOWN : {
						this.el.className = "pipe down";
						this.el.style.bottom = randomInt(-220, 500 - _height -400 ) + "px";
					}
				}
				game.append(this);
				this.move();
				return this;
			}
			this.right = function(val) {
				if(val) this.el.style.right = val + "px";
				return parseInt(this.el.style.right);
			}
			this.move = function(){
				var r = 0;
				var t = setInterval(function(){
					this.right(-52 + r);
					if(this.right() > game.width()) {
						clearInterval(t);
						this.destory();
					}
					r++;
				}.bind(this), 30);
			}
			this.destroy = function(){
				this.el.remove();
			}
		}
		Pipe.PIPE_TYPE_UP = Symbol();
		Pipe.PIPE_TYPE_DOWN = Symbol();
		Pipe.PIPE_TYPE_AAA = Symbol();
		
		
		
		
		//黄色的鸟
		var bird = {
			el : document.getElementsByClassName("bird")[0],
			speed : 5,
			top : function(val){
				if(val) this.el.style.top = val + "px";
				return this.el.offsetTop;
			},
			init : function(){
				this.controller.run();
			},
			show : function(){
				this.init();
				this.el.style.display = "block";
				this.fall();
			},
			jump : function(){
				this.speed -= 10;
			},
			fall : function(){
				var t = setInterval(function(){
					this.top( this.top()+this.speed++ );
				}.bind(this),30)
			},
			controller : new Controller("key")
		}
		
		//蓝色的鸟
		var blueBird = {
			el : document.getElementsByClassName("bluebird")[0],
			top : function(val){
				if(val) this.el.style.marginTop = val + "px";
				return this.el.style.marginTop;
			},
			fly : function(){
				var x = 0;
				this.t = setInterval(function(){
					this.top(70 - 50*Math.sin( Math.PI/180 * x ));
					x+=4;
				}.bind(this), 20);
			},
			destroy : function(){
				clearInterval(this.t);
				this.el.remove();
			}
		}
		
		//Game
		var game = {
			title : document.getElementsByClassName("title")[0],
			startBtn : document.getElementsByClassName("start")[0],
			el : document.getElementsByClassName("main")[0],
			background : {
				move : function(){
					var num = 0;
					setInterval(function(){
						game.el.style.backgroundPositionX = num-- + "px";
					}, 30);
				}
			},
			width : function(){
				return this.el.offsetWidth;
			},
			append : function(pipe){
				this.el.appendChild(pipe.el);
			},
			init : function(){
				blueBird.fly();
				
				this.background.move();
				
				this.startBtn.addEventListener("click", function(){
					//该消失的消失
					blueBird.destroy();
					game.title.remove();
					game.startBtn.remove();
					game.start();
				})
			},
			autoCreatePipe : function(){
				console.log("ok~~~~~~~~~~~~");
				var p1 = new Pipe(Pipe.PIPE_TYPE_UP).init();
				var p2 = new Pipe(Pipe.PIPE_TYPE_DOWN).init(p1._height);
				setTimeout(game.autoCreatePipe, randomInt(3500, 10000));
			},
			start : function(){
				bird.show();
				this.autoCreatePipe();
			},
			over : function(){
				
			}
		}
		
		game.init();
		
	</script>
</html>
